<template>
  <div>
    <DialogNew v-model="is_show" @close="close" title="店铺设置" width="500px">
      <div class="padding-sm" v-loading="loading">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="80px">
          <el-form-item v-if="fasle" prop="id" />
          <el-form-item
            v-if="action === 'setSalesman'"
            label="业务员"
            prop="sales_person_id"
          >
            <el-select
              class="input"
              v-model="form.sales_person_id"
              placeholder="请选择业务员"
              @change="
                (val) => {
                  form.sales_person_name = getSalesmanOptions.find(
                    (item) => item.id === val
                  )?.name
                }
              "
            >
              <el-option
                v-for="item in getSalesmanOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="fasle" prop="sales_person_name" />
          <el-form-item
            v-if="action === 'setBrand'"
            label="关联品牌"
            prop="brand_id"
          >
            <el-select
              class="input"
              v-model="form.brand_id"
              placeholder="请选择品牌"
              multiple
            >
              <el-option
                v-for="item in getBrandOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="action === 'setDiscount'"
            label="设置折扣"
            prop="discount"
          >
            <el-input-number
              class="input"
              v-model="form.discount"
              :min="0"
              placeholder="请输入折扣"
              :controls="false"
              @wheel.native.prevent="stopScroll($event)"
            />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <el-button @click="is_show = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" v-repeat>
          确定
        </el-button>
      </template>
    </DialogNew>
  </div>
</template>

<script setup>
  import DialogNew from '@/components/DialogNew/index.vue'
  import { stopScroll } from '@/utils/helper'
  import {
    getSalesmanList,
    getBrandList,
    setSalesman,
    setBrand,
    setDiscount,
    getStoreInfo,
  } from '@/api/store'
  import { message } from '@/utils/helper'
  const is_show = ref(false)

  const loading = ref(false)
  const action = ref('add')
  const form = reactive({
    id: undefined,
    sales_person_id: undefined,
    sales_person_name: '',
    brand_id: [],
    discount: undefined,
  })
  const open = async (type, row) => {
    action.value = type
    if (row) {
      const {
        data: { sales_person_id, discount, supplicerShopBrand },
      } = await getStoreInfo({
        id: row.id,
      })
      const brand_id = supplicerShopBrand.map((item) => item.brand_id) || []
      const { id } = row
      Object.assign(form, {
        id,
        brand_id,
        discount,
        sales_person_id,
      })
    }
    // 根据类型获取对应的列
    switch (type) {
      case 'setSalesman':
        await getSalesmanListData()
        rules.value = {
          sales_person_id: {
            required: true,
            message: '请选择业务员',
            trigger: 'change',
          },
        }
        form.sales_person_name = getSalesmanOptions.value.find(
            (item) => item.id === form.sales_person_id
          )?.name || ''
        break
      case 'setBrand':
        getBrandListData()
        rules.value = {
          brand_id: {
            required: true,
            message: '请选择品牌',
            trigger: 'change',
          },
        }
        break
      case 'setDiscount':
        form.discount = row.discount
        rules.value = {
          discount: {
            required: true,
            message: '请输入折扣',
            trigger: 'change',
          },
        }
        break
    }
    is_show.value = true
  }

  const close = () => {
    getSalesmanOptions.value = []
    getBrandOptions.value = []
    formRef.value.resetFields()
  }

  const rules = ref({})
  const getSalesmanOptions = ref([])
  const getSalesmanListData = async () => {
    const { data } = await getSalesmanList()
    getSalesmanOptions.value = data.data
  }

  const getBrandOptions = ref([])
  const getBrandListData = async () => {
    const { data } = await getBrandList()
    getBrandOptions.value = data.data
  }

  const emits = defineEmits(['fetch-data'])

  const formRef = ref(null)
  const handleSubmit = () => {
    formRef.value.validate(async (valid) => {
      if (valid) {
        switch (action.value) {
          case 'setSalesman':
            await setSalesman({
              id: form.id,
              sales_person_id: form.sales_person_id,
              sales_person_name: form.sales_person_name,
            })
            break
          case 'setBrand':
            await setBrand({
              id: form.id,
              brand_id: form.brand_id,
            })
            break
          case 'setDiscount':
            await setDiscount({
              id: form.id,
              discount: form.discount,
            })
            break
        }
        emits('fetch-data')
        message('设置成功')
        is_show.value = false
      }
    })
  }

  defineExpose({ open })
</script>

<style lang="scss" scoped>
  .input {
    width: 285px;
  }
</style>
